<template>
  <div class="person">
    <h2>当前求和结果是:{{ sum }}</h2>
    <button @click="changeSum">sum+1</button>
    <hr />
    姓名：{{ person.name }} <br />
    年龄：{{ person.age }} <br />
    <button @click="changeName">更改姓名</button>
    <button @click="changeAge">更改年龄</button>
    <button @click="changePerson">更改人员</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>

<script lang="ts" setup>
import { ref, watch } from 'vue'

let sum = ref(0)

function changeSum() {
  sum.value += 1
}
// 监视 ref 定义的 基本数据类型
const stopWtach = watch(sum, (newVal, oldVal) => {
  console.log(oldVal, newVal)
  // newVal >= 5时, 取消监视
  if (newVal >= 5) {
    stopWtach()
  }
})

console.log(stopWtach)

let person = ref({ name: '李四', age: 48 })

function changeName() {
  person.value.name = '张三'
}
function changeAge() {
  person.value.age += 1
}
function changePerson() {
  person.value = { name: '赵五', age: 26 }
}

// 监视 ref 定义的 对象类型; 监测的是对象的地址值
// 只更改属性时, 回调函数中 newVal, oldVal 的值是一样的
// 更改对象地址时, 回调函数中 newVal, oldVal 的值是更改前后的对象
watch(
  person,
  (newVal, oldVal) => {
    console.log(newVal, oldVal)
  },
  // deep: true 表示深层次监测对象
  { deep: true },
)
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}
button {
  margin: 0 5px;
}
</style>
